<template>
  <div>
    <!-- 类型分组界面-主要部分 -->
    <FrontSideTable
      v-show="!isStructureTypePageVisible"
      dataUrl="/param/structureGroup/getList"
      addUrl="/param/structureGroup/add"
      editUrl="/param/structureGroup/edit"
      deleteUrl="/param/structureGroup/delete"
      tableTitle="结构类型组"
      searchHint="根据结构类型组名或字段名查找"
      :form="form"
      :rules="rules"
      :searchProps="searchProps"
      :columns="columns"
      @onCreated="onCreated"
      @beforeAdd="beforeAdd"
      @beforeEdit="beforeEdit"
      @onManage="onManage"
      manageable>
      <!-- 表单 -->
      <template slot="form">
        <el-form-item label="所属结构组" prop="parentId">
          <el-select v-model="form.parentId" style="width:100%" placeholder="所属结构组" filterable clearable>
            <el-option v-for="item of parentStructures" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型组名" prop="name">
          <el-input v-model="form.name" placeholder="输入结构类型组名"></el-input>
        </el-form-item>
        <el-form-item label="属性名称" prop="field">
          <el-input v-model="form.field" placeholder="输入属性名称"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.notes"></el-input>
        </el-form-item>
      </template>
    </FrontSideTable>

    <!-- 类型管理界面-子层 -->
    <StructureTypeMaintenance
      v-if="isStructureTypePageVisible"
      :tableTitle="'结构类型组 / '+currentStructureGroup.name"
      :structureGroup="currentStructureGroup"
      @onBack="handleBack">
    </StructureTypeMaintenance>
  </div>
</template>

<script>
  import StructureTypeMaintenance from "../../template/StructureTypeMaintenance.vue"
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {hasAuthorizedFunction} from "../../../assets/js/global"

  //用于重复校验
  let oldName = "",
    oldField = "";

  export default {
    name:"StructureGroupMaintenance",
    data() {
      //属性名校验
      let fieldValidator = (rule, value, callback)=>{
        if(oldField === value) {
          callback();
        } else if(this.dataList.some(item=>item.field === value)) {
          callback(new Error("属性名重复"));
        } else {
          callback();
        }
      };

      //组名校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if (this.dataList.some(item=>item.name === value)) {
          callback(new Error("组名重复"));
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        parentStructures:[],
        currentStructureGroup:{
          id:"",
          name:""
        },
        columns:[
          {prop:"name", label:"结构类型组名"},
          {prop:"field", label:"所属字段"}
        ],
        searchProps:["name","field"],
        form: {
          name:"",
          field:"",
          parentId:""
        },
        rules: {
          field:[
            {required:true, message:"请输入属性名", trigger:"blur"},
            {validator:fieldValidator, trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入组名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ]
        },
        isStructureTypePageVisible:false
      }
    },
    methods:{
      onCreated(dataList) {
        this.dataList = dataList;
      },
      beforeAdd() {
        oldName = "";
        oldField = "";
        this.parentStructures = this.dataList;
        clearFields(this.form);
      },
      beforeEdit(data) {
        oldName = data.name;
        oldField = data.field;
        this.parentStructures = this.dataList.filter(item=>item.id !== data.id);
        this.form = {...data};
      },
      onManage(data) {
        this.currentStructureGroup = data;
        this.isStructureTypePageVisible = true;
      },
      handleBack() {
        this.isStructureTypePageVisible = false;
      }
    },
    components:{FrontSideTable, StructureTypeMaintenance}
  }
</script>



// WEBPACK FOOTER //
// StructureGroupMaintenance.vue?55e82c74
